<template>
	<view class="products" :data-theme="theme">
		<view style="background-color: #fff;padding-bottom: 10rpx;">
			<u-tabs :list="tabList" :scrollable="false" @click="tabChangeClick" :lineColor="bgColor"
				:current="currentIndex" :activeStyle="{ color: bgColor,fontWeight: '600'}"
				:inactiveStyle="{color:'#4c4d51'}" lineWidth="50"></u-tabs>
		</view>

		<swiper class="tab-view" :duration="300" :current.sync="currentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
					style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">
					<swiper-sekill-page class="swiper-page" :bgColor="bgColor" :tab="tab" ref="tab"
						@goMyActive="goMyActive" @checkboxChange="checkboxChange"></swiper-sekill-page>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view v-if="currentIndex == 0"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<view class="read-contract-item">
				<checkbox-group @change="readItemChange">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;align-items: center;">
						<view>
							<checkbox :value="'1'" :checked="isSureRead" />
						</view>
						<view>已阅读并同意 <text class="main_color">《合作商自营销协议》</text> </view>
					</label>
				</checkbox-group>
			</view>
			<view
				style="display: flex; font-size: 16px;line-height: 70rpx;background-color: #f3f6ff;margin: 16rpx -20rpx;padding-left: 30rpx;">
				<view>
					<span>已选</span>
					<span style="margin-left: 10px;"
						v-if="tabList && tabList[currentIndex] && tabList[currentIndex].checkboxValue"
						:style="{color:bgColor}">{{tabList[currentIndex].checkboxValue.length ? tabList[currentIndex].checkboxValue.length : '0'}}</span>
				</view>
			</view>
			<view style="display: flex;">
				<button @click="requireSeckillSta(1)"
					style="border-radius: 16rpx;color: #FFF;padding:14rpx 20rpx;flex: 1;margin-right: 10rpx;background-color: #e3e0e3;"
					:color="bgColor">拒绝</button>
				<button @click="requireSeckillSta(2)" class="bg_color"
					style="border-radius: 16rpx;color: #FFF;padding:14rpx 20rpx;flex: 1;margin-left: 10rpx;"
					:color="bgColor">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperSekillPage from "./components/swiper-seckill-page.vue";
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		components: {
			swiperSekillPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabList: [],
				currentIndex: 0,
				isAllChecked: false,
				// ----阅读合同-------
				isSureRead: false,
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					title: "",
					name: "待确认",
					type: 1,
					count: 0,
					checkboxValue: [],
				},
				{
					id: "tab12",
					title: "",
					name: "已确认",
					type: 2,
					count: 0,
					checkboxValue: [],
				}
			];
		},
		methods: {
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				this.$refs.tab[this.currentIndex].scrolltolowerFn();
			},
			tabChangeClick(item) {
				this.currentIndex = item.index;
			},
			readItemChange(evt) {
				console.log('evt', evt);
				// this.current = !this.current;
			},

			//多选
			checkboxChange(checkboxValue) {
				console.log('checkboxValue', checkboxValue)
				this.tabList[this.currentIndex].checkboxValue = checkboxValue;
				console.log(this.tabList[this.currentIndex].checkboxValue)
			},
			
			//事件处理
			requireSeckillSta(ind){
				console.log('ind',ind);
				
			},


			//去我的活动
			goMyActive() {
				this.goPage(`/pages/marketing/seckillList/myActive/myActive`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.products {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.read-contract-item {
		margin-left: 6rpx;
	}
</style>